<template>
	<!-- 登录 -->
	<div id="app" class="app1">
		<router-view></router-view>
		<div class="link">
			<router-link type="primary" to="/register">立即注册</router-link>还没有账号？
		</div>
		<el-divider></el-divider>
		<el-card class="box-card" >
			<div id="flexx">
				<div class="flexx-from">
					<h2>软特来福账号密码登录</h2>
					<div class="flexx-from1">
						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="用户账号:">
								<el-col :span="20">
									<el-input type="text" v-model="form.name" prefix-icon="el-icon-user" placeholder="输入邮箱号/手机号"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item label="用户密码:">
								<el-col :span="20">
									<el-input type="password" v-model="form.password" prefix-icon="el-icon-lock" placeholder="输入密码"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item>
								<template slot-scope="scope">
									<el-button type="primary" @click="onSubmit">立即登录</el-button>
									<el-button size="mini" round @click="onForget">忘记密码</el-button>
								</template>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</el-card>

		<div>
			<el-dialog title="忘记密码" :visible.sync="updatePwdVisible" width="80%" :before-close="handleClose">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="电话号码:">
						<el-input></el-input>
					</el-form-item>
					<el-form-item label="输入验证码:">
						<el-input></el-input>
						<el-button type="primary" @click="onSend">发送验证码</el-button>
					</el-form-item>
					<el-form-item label="输入新密码:">
						<el-input></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onUpdateCommit">修改密码</el-button>
						<el-button @click="onupdatecancel">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		
		<el-divider></el-divider>
	</div>
</template>

<script>
	export default {
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			onForget() {
				console.log('open')
				this.updatePwdVisible = true
			},
			onSend() {
				console.log('send')
			},
			onUpdateCommit() {

			},
			onupdatecancel() {
				console.log('cancel')
				this.updatePwdVisible = false
			}
		},
		data() {
			return {
				form: {
					name: '',
					password: '',
					type: [],
					updatePwdVisible: false
				},
				url: 'https://img-blog.csdnimg.cn/20201220233836522.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm90aW9uX0lU,size_16,color_FFFFFF,t_70#pic_center'
			}
		},
		beforeRouteUpdate(to, from, next) {
			// 做一些想要做的处理...
			// this.errCode = to.params.code
			// this.info = formatErrorMsg(this.errCode)
			next() // 一定要有next
		}
	}
</script>

<style>
	.app1{
		margin-top: 0rem;
		margin-bottom: 0rem;
		background-image: url(../assets/huaxue.png);
		
	}
	.link {
		display: flex;
		flex-direction: row-reverse;
		margin-right: 10%;
	}

	.demo-image {
		margin-left: 10%;
		margin-top: 3%;
	}

	.demo-image1 {
		margin-left: 40%;
		margin-top: 5%;
	}

	.flexx {
		display: flex;
		flex-direction: row;
		margin-top: 50%;
		margin-left: 50%;

	}

	.flexx-from {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.flexx-from1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box-card {
		margin: auto;
		width: 50%;
		height: 50%;
		top: 50%;
		left: 50%;
		padding: 6px;

	}
</style>
